<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--Meta Informations-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Site Title-->
    <title>个人中心</title>

    <!--Favicons-->
    <link rel="apple-touch-icon" sizes="60x60" th:href="@{assets/favicon/logo2.png}">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo5.png}" sizes="32x32">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo4.png}" sizes="16x16">
    <link rel="manifest" th:href="@{assets/favicon/manifest.json}">
    <link rel="mask-icon" th:href="@{assets/favicon/safari-pinned-tab.svg}" color="#5bbad5">
    <link rel="shortcut icon" th:href="@{assets/favicon/logo3.png}">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!--Style Assets-->
    <link th:href="@{echarts/tree.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{vendors/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{vendors/owl/owl.carousel.css}">
    <link rel="stylesheet" th:href="@{vendors/magnific/magnific-popup.css}">
    <link rel="stylesheet" th:href="@{vendors/bootstrap-select/css/bootstrap-select.min.css}">

    <!--Theme Style-->
    <link rel="stylesheet" th:href="@{assets/css/styles.css}">
    <link rel="stylesheet" th:href="@{lb/lb.css}">
    <script th:src="@{lb/lb.js}"></script>
    <script th:if="${user.getTrees().size()}>0">
        window.onload = function () {
            // 轮播选项
            const options = {
                id: 'lb-1',              // 轮播盒ID
                speed: 1000,              // 轮播速度(ms)
                delay: 10000,             // 轮播延迟(ms)
                direction: 'left',       // 图片滑动方向
                // moniterKeyEvent: true,   // 是否监听键盘事件
                moniterTouchEvent: true  // 是否监听屏幕滑动事件
            };
            const lb = new Lb(options);
            lb.start();
        }
    </script>

    <link rel="stylesheet" th:href="@{masonry/masonry.css}">

</head>
<body>

<div id="page" class="site row">

    <header id="header" class="site-header">

        <nav class="navbar navbar-defatult navbar-fixed-top fluid-navbar navbar-style1">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a th:href="@{index}" class="navbar-brand">
                        <img th:src="@{assets/icons/logo9.png}" alt="" class="logo-img"/></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"
                            aria-expanded="false">
                        <span class="sr-only">Nav Opener</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="main-nav">
                    <ul class="navbar-nav nav navbar-right">
                        <li><a th:href="@{/}">主页</a></li>
                        <li><a th:href="@{personal_center}" class="mark-img" data-spm-anchor-id="5176.12281949.0.0">
                            <img class="userPhoto" style="width: 22px; height: 22px; vertical-align: middle; margin-right: 10px;
                                        border-radius: 15px;" src="https://ucc.alicdn.com/avatar/avatar3.jpg">
                            <span th:text="${user.getName()}"></span>
                        </a>
                        </li>
                        <li><a th:href="@{login}">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <!--Page Cover-->
        <section class="row page-cover" data-slide="assets/images/slide1.jpg" style="padding-bottom: 10px">
            <div class="container">
                <h2 class="this-title" style="color: white">个人中心</h2>
            </div>
        </section>

    </header>

    <main id="contents" class="site-contnts">

        <!--Blogs-->
        <section class="row blog-section" style="padding: 200px 0px 10px 0px">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 sidebar">
                        <aside class="row widget widet_search">
                            <div class="media service-quote">
                                <div class="media-left" style="padding-left: 0px"><a href="/personal_edit"
                                                                                     class="media-object"><img
                                        th:src="@{assets/images/service-quote.png}" alt="HostPro Client image"
                                        class="img-circle"></a></div>
                                <div class="media-body">
                                    <h4 th:text="${user.getName()}"></h4>
                                    <h5 th:text="${user.getEmail()}"></h5>
                                    <p>
                                        <em th:text="${user.getSign()}"></em>
                                    </p>
                                </div>
                                <div class="media-right"><span class="media-object"><img
                                        th:src="@{assets/icons/service-quote2.png}"
                                        alt="HostPro Service Quote Sign"></span></div>
                            </div>
                        </aside>
                        <aside class="row widget widget_categories">
                            <ul>
                                <li class="cat-info">今天是您来到Mlearning的第<b style="color: #f5994e" th:text="${days+1}"></b>天
                                </li>
                                <li class="cat-info">共掌握<b style="color: #f5994e" th:text="${mastered.size()}"></b>个知识点
                                </li>
                                <li class="cat-info">共收藏<b style="color: #f5994e" th:text="${myBooks.size()}"></b>本书籍
                                </li>
                            </ul>
                        </aside>
                        <aside class="row widget widget_tag_cloud">
                            <h5 class="widget-title">您可能对以下知识感兴趣</h5>
                            <div class="tagcloud">
                                <a style="margin-right: 5px" class="tag-link-1" onclick="recKnow($(this).text())" th:each="know:${recKnow}"
                                   th:text="${know}"></a>
                            </div>
                        </aside>
                    </div>
                    <div class="col-md-8">
                        <article class="row loop-post" style="margin-bottom: 0pc">
                            <ul class="nav nav-tabs nav-justified hstab" role="tablist">
                                <li role="presentation" class="active" id="myTree"><a href="#hst-1" aria-controls="hst-1" role="tab"
                                                                          data-toggle="tab">我的知识树</a></li>
                                <li role="presentation"><a href="#hst-2" aria-controls="hst-2" role="tab"
                                                           data-toggle="tab">我已掌握</a></li>
                                <li role="presentation"><a href="#hst-3" aria-controls="hst-3" role="tab"
                                                           data-toggle="tab"
                                                           >图谱查询</a>
                                </li>
                                <li role="presentation"><a href="#hst-4" aria-controls="hst-4" role="tab" onclick="updateBooks()"
                                                           data-toggle="tab">我的书籍</a></li>
                                <!--                                <li role="presentation"><a href="#hst-5" aria-controls="hst-5" role="tab" id="recommend"-->
                                <!--                                                           data-toggle="tab">书籍推荐</a></li>-->
                            </ul>
                            <div class="tab-content hst-contents">
                                <div role="tabpanel" class="tab-pane active" id="hst-1">
                                    <div class="row" th:if="${user.getTrees().size()}==0">
                                        <div class="col-md-12">
                                            <h1>当前还未收藏知识点哟~</h1>
                                            <h2>快去尝试下图谱或推荐内容吧。</h2>
                                            <p></p>
                                        </div>
                                    </div>
                                    <div class="lb-box" id="lb-1" th:if="${user.getTrees().size()}>0">
                                        <!-- 轮播内容 -->
                                        <div class="lb-content">
                                            <div class="lb-item" th:classappend="${treeStat.index}==0? 'active':''"
                                                 th:each="tree,treeStat:${user.getTrees()}">
                                                <div class="skill-tree-ems">
                                                    <div class="tree-wrap">
                                                        <div class="tree">
                                                            <div class="tree-main">
                                                                <ul>
                                                                    <li class=""
                                                                        th:classappend="${knowStat.index}%2==0? 'l':'r'"
                                                                        th:each="know,knowStat:${tree.getKnows()}">
                                                                        <div class="tree-branch action">
                                                                            <i th:if="${knowStat.index%2==1}"></i>
                                                                            <i th:if="${knowStat.index%2==1}"></i>
                                                                            <span class="tbox"
                                                                                  th:classappend="${tree.getFlags()[knowStat.index]}? 'already':''"
                                                                                  th:text="${know}"
                                                                                  th:sort="${knowStat.index+1}" onclick="aboutKnow($(this))"></span>
                                                                            <i th:if="${knowStat.index%2==0}"></i>
                                                                            <i th:if="${knowStat.index%2==0}"></i>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 轮播标志 -->
                                        <ol class="lb-sign">
                                            <li class="" th:classappend="${treeStat.index}==0? 'active':''"
                                                th:each="tree,treeStat:${user.getTrees()}"
                                                th:text="${treeStat.index+1}"></li>
                                        </ol>
                                        <!-- 轮播控件 -->
                                        <div class="lb-ctrl left">＜</div>
                                        <div class="lb-ctrl right">＞</div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="hst-2">
                                    <div class="row" th:if="${mastered.size()}==0">
                                        <div class="col-md-12">
                                            <h1>当前还未掌握知识点哟~</h1>
                                            <h2>快去尝试下图谱或推荐内容吧。</h2>
                                            <p></p>
                                        </div>
                                    </div>
                                    <div class="row" th:if="${mastered.size()>0}">
                                        <aside class="row widget widget_tag_cloud">
                                            <div class="tagcloud">
                                                <a class="tag-link-1 " th:each="know:${mastered}" style="margin-right: 5px"
                                                 onclick="mastered($(this).text())"  th:text="${know.getName()}"></a>
                                            </div>
                                        </aside>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="hst-3">
                                    <aside class="row widget widet_search">
                                        <div class="searchform input-group  col-lg-4">
                                                <input type="search" id="search" class="form-control"
                                                       placeholder="输入你想查看的知识点">
                                                <span class="input-group-addon"><button
                                                        onclick="draw($('#search').val())"><i
                                                        class="fa fa-search"></i></button></span>
                                        </div>
                                    </aside>
                                    <div id="gxt" style="height: 800px;width: 1000px"></div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="hst-4">
                                    <div class="row" th:if="${myBooks.size()}==0">
                                        <div class="col-md-12">
                                            <h1>当前还未收藏哟~</h1>
                                            <h2>快去尝试下图谱或推荐内容吧。</h2>
                                            <p></p>
                                        </div>
                                    </div>
                                    <div style="padding-bottom: 50px;" th:if="${myBooks.size()>0}">
                                        <div class="media comment" th:each="book:${myBooks}">
                                            <div class="media-left">
                                                <a target="_blank" th:href="'/book_detail?id='+${book.getId()}"
                                                   class="media-object">
                                                    <img th:src="${book.getImg()}" th:alt="${book.getName()} ">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <div class="comment-body">
                                                    <header class="comment-head">
                                                        <a target="_blank" th:href="'/book_detail?id='+${book.getId()}">
                                                            <h2 class="commenter-name" style='font-weight: bold'
                                                                th:text="${book.getName()}"></h2>
                                                        </a>
                                                        <h6 class="comment-time">
                                                            <i class="fa fa-user"></i><span>作者</span>|<span
                                                                th:text="${book.getAuthor()}"></span>
                                                        </h6>
                                                    </header>
                                                    <footer class="comment-foot">
                                                        <p th:text="${book.getBookIntro()}"></p>
                                                    </footer>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
                <div class="row">
                    <hr style="width:100%;color:white;size: 10px">
                    <h3 style="text-align: center">书籍推荐</h3>
                    <hr style="width:100%;color:white;size: 10px">
                    <div class="demo clearfix">
                        <div id="recBooks" class="item_list infinite_scroll"
                             style="padding-bottom: 50px;">
                            <div class="item masonry_brick" th:each="entry:${recBooks}">
                                <div class="item_t">
                                    <div class="img">
                                        <img width="154" height="208"
                                             th:alt="${entry['book'].getName()}"
                                             th:src="${entry['book'].getImg()}"/>
                                        <span class="price"
                                              th:text="${entry['book'].getAuthor()}"></span>
                                        <div class="btns">
                                            <a class="img_album_btn" target="_blank"
                                               th:href="'book_detail?id='+${entry['book'].getId()}">了解详情</a>
                                        </div>
                                    </div>
                                    <div class="title" style="padding-bottom: 0px">
                                        <h4>
                                            <strong th:text="${entry['book'].getName()}"></strong>
                                        </h4>
                                        <aside class="row widget widget_tag_cloud"
                                               style="margin-bottom: 0px;">
                                            <div class="tagcloud">
                                                <a class="tag-link-1 "
                                                   th:each="tag,tagStat:${entry['tag']}"
                                                   th:if="${tagStat.index} < 4" th:text="${tag}"
                                                   style='margin-right: 5px;line-height: 25px !important;padding: 0 5px !important;'></a>
                                            </div>
                                        </aside>
                                    </div>
                                </div>

                                <div class="item_b clearfix">
                                    <div class="items_likes fl">
                                        <a target="_blank" th:href="'book_detail?id='+${entry['book'].getId()}"
                                           class="like_btn"></a>
                                        <em class="bold" th:text="'评分 '+${entry['book'].getScore()}"></em>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!--Footer-->
    <footer id="footer" class="site-footer">
        <!--Footer Bottom-->
        <section class="row site-footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 widget-footer">
                        <div class="row widget-content">
                            <ul class="menu">
                                <li style="color: #939393">鲁ICP备20006308</li>
                                <li>
                                    <a target="_blank"
                                       href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37011202000992"
                                       style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                                        <img th:src="@{assets/images/beian.png}" style="float:left;"/>
                                        <p style="float:left;height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">
                                            鲁公网安备 37011202000992号</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </footer>

</div>

<!--modal-->
<div class="modal fade" id="modal" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
            </div>
        </div>
        <!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{vendors/jquery.min.js}"></script>
<!--<script type="text/javascript" th:src="@{masonry/jquery.infinitescroll.js}"></script>-->
<script type="text/javascript" th:src="@{masonry/jquery.masonry.js}"></script>

<script type="text/javascript">
    function item_masonry() {
        $('.item img').load(function () {
            $('.infinite_scroll').masonry({
                itemSelector: '.item',
                columnWidth: 170,
                gutter: 15,
                horizontalOrder: true
            });
        });
        $('.infinite_scroll').masonry({
            itemSelector: '.item',
            columnWidth: 170,
            gutter: 15,
            horizontalOrder: true
        });
    }

    //允许你绑定一个在DOM（不包含图片）文档载入完成后执行的函数。
    $(function () {
        function item_callback() {
            $('.item').mouseover(function () {
                $(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
                $('.btns', this).show();
            }).mouseout(function () {
                $(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');
                $('.btns', this).hide();
            });

            item_masonry();
        }

        item_callback();

        $('.item').fadeIn("1000");
    });
</script>

<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{vendors/owl/owl.carousel.min.js}"></script>
<script th:src="@{vendors/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{vendors/magnific/jquery.magnific-popup.min.js}"></script>
<script th:src="@{vendors/isotope.pkgd.min.js}"></script>
<script th:src="@{vendors/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{vendors/form-validator/jquery.form.js}"></script>
<script th:src="@{vendors/form-validator/jquery.validate.min.js}"></script>
<script th:src="@{vendors/waypoint/waypoints.min.js}"></script>
<script th:src="@{vendors/couterup/jquery.counterup.min.js}"></script>
<script th:src="@{vendors/bootstrap-select/js/bootstrap-select.min.js}"></script>
<!--Theme JS-->
<script th:src="@{assets/js/hostpro.js}"></script>
<script th:src="@{echarts/echarts.js}"></script>
<script th:src="@{echarts/macarons.js}"></script>
<script th:src="@{tag_tree/personal.js}"></script>

</body>
</html>